<template>
  <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
    <van-cell title="文章评论"></van-cell>
    <commentItem
      v-for="(item, i) in list"
      :key="i"
      :comment="item"
      @click_comment="curruntComment"
    />
  </van-list>
</template>

<script>
import { getComments } from '@/api/user.js'
// 导入 数据 组件
import commentItem from './comment_itme.vue'
export default {
  name: 'commentList',
  props: {
    art_id: {
      type: [Number, String],
      required: true
    }
  },
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      limit: 10,
      totalComment: 0,
      ReplyShow: false,
      currunt_comment: {}
    }
  },
  created() {
    this.onLoad()
    // 将 获取到 的 评论 数据 列表 发布到 父组件上
    this.$emit('commentData', this.list)
  },
  methods: {
    async onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      const { data } = await getComments({
        source: this.art_id,
        limit: this.limit
      })
      console.log(data.data)
      this.list.push(...data.data.results)
      // 获取 到 总评论数
      this.totalComment = data.data.total_count
      this.$emit('total_commen', this.totalComment)
      console.log(this.totalComment)
      // 加载状态结束
      this.loading = false
      // 数据全部加载完成
      if (data.data.results.length <= this.limit) {
        this.finished = true
      }
    },
    // isReplyShow(isreply) {
    //   this.ReplyShow = isreply
    //   this.$emit('yesReplyshow', this.ReplyShow)
    // },
    curruntComment(comment) {
      this.currunt_comment = comment
      console.log(this.currunt_comment)
      this.$emit('curruntcommentData', this.currunt_comment)
    }
  },
  computed: {},
  watch: {},
  components: {
    commentItem
  }
}
</script>

<style lang="less" scoped>
</style>
